<!-- 修改手机号码 -->
<template>
  <view class="phone-verify-container">
    <!-- 表单区域 -->
    <view class="form-container">
      <!-- 手机号输入 -->
      <view class="form-item">
        <text class="form-label">手机号</text>
        <u-input
          v-model="phoneNumber"
          placeholder="请输入手机号"
          type="number"
          maxlength="11"
          clearable
          @focus="focusField('phone')"
          :class="{ 'active-field': activeField === 'phone' }"
        ></u-input>
      </view>
			
			<!-- 分隔线 -->
			<u-line color="#b1b1b1" margin="10rpx 0"></u-line>
      
      <!-- 验证码输入 -->
      <view class="form-item">
        <text class="form-label">验证码</text>
        <view class="code-input-wrapper">
          <u-input
            v-model="verifyCode"
            placeholder="请输入短信验证码"
            type="number"
            maxlength="6"
            clearable
            @focus="focusField('code')"
            :class="{ 'active-field': activeField === 'code' }"
          ></u-input>		
          <u-button
            type="default"
            plain
            size="mini"
            shape="circle"
            @click="getVerifyCode"
            :disabled="!canGetCode || countdown > 0"
            class="get-code-btn"
						:custom-style="customStyle"
          >
            {{ countdown > 0 ? `${countdown}s后重新获取` : '获取验证码' }}
          </u-button>
        </view>
      </view>
			
			<!-- 分隔线 -->
			<u-line color="#b1b1b1" margin="10rpx 0"></u-line>
      
      <!-- 提交按钮 -->
      <view class="submit-btn">
        <u-button
          type="primary"
          shape="circle"
          @click="submitForm"
          :disabled="!formValid"
          :loading="loading"
					:custom-style="btuStyle"
        >
          提交
        </u-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
			customStyle: {
				// "backgroundColor": "#03B8CD"
				"color": "#03B8CD"
			},
			btuStyle: {
				"backgroundColor": "#03B8CD",
				"color": "#ffffff"
			},
      phoneNumber: '',
      verifyCode: '',
      activeField: '',
      loading: false,
      countdown: 0,
      timer: null
    }
  },
  computed: {
    // 手机号是否有效
    isPhoneValid() {
      return /^1[3-9]\d{9}$/.test(this.phoneNumber)
    },
    
    // 是否可以获取验证码
    canGetCode() {
      return this.isPhoneValid
    },
    
    // 表单是否有效
    formValid() {
      return this.isPhoneValid && this.verifyCode.length === 6
    }
  },
  methods: {
    focusField(field) {
      this.activeField = field
    },
    
    // 获取验证码
    getVerifyCode() {
      if (!this.$u.test.mobile(this.phoneNumber)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return
      }      
      // 开始倒计时
      this.countdown = 60
      this.startCountdown()
			
			// 从服务端获取验证码
			uni.showLoading({
				title: '正在获取验证码',
				mask: true
			})
			setTimeout(() => {
				this.$u.api.createyzm({
					"userphoneno": this.phoneNumber
				}).then(res => {
					console.log('验证码：',res)
					let baseinfo = res.data.base_info
					if(baseinfo) {
						uni.setStorageSync('phoneCode', baseinfo)
					}
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					this.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					// this.$refs.uCode.start();
				}).catch((err) => {
					this.$u.toast('验证码获取失败，请重新获取！');
				})
			}, 2000);

      
      // 模拟发送验证码请求
      // uni.showLoading({
      //   title: '发送中...'
      // })
      
      // setTimeout(() => {
      //   uni.hideLoading()
      //   uni.showToast({
      //     title: '验证码已发送',
      //     icon: 'success'
      //   })
      // }, 1000)
    },
    
    // 倒计时
    startCountdown() {
      if (this.timer) clearInterval(this.timer)
      
      this.timer = setInterval(() => {
        if (this.countdown <= 0) {
          clearInterval(this.timer)
          return
        }
        this.countdown--
      }, 1000)
    },
    
    // 提交表单,修改手机号
    submitForm() {
      // if (!this.formValid) {
      //   uni.showToast({
      //     title: '请填写完整信息',
      //     icon: 'none'
      //   })
      //   return
      // }      
      this.loading = true			
			this.$u.api.updateuserphoneno({
				"usercode": uni.getStorageSync('usercode'), ///#用户code
				"userphoneno": this.phoneNumber,////#用户新手机号
			}).then(res => {
				console.log('修改手机号：',res)
				this.$u.toast('修改手机号码成功！');
				this.loading = false
				uni.removeStorageSync('phoneCode');
				setTimeout(() => {
					uni.navigateTo({
					  url: '/pages/Practitioner/mine/practitionerSetting'
					})
				},800)

			}).catch(err => {
				uni.showToast({
				  title: '手机号码修改失败，请重试！',
				  icon: 'fail'
				})
				this.loading = false
			})
			
      
      // 模拟提交请求
      // setTimeout(() => {
      //   this.loading = false
      //   uni.showToast({
      //     title: '验证成功',
      //     icon: 'success'
      //   })
        
      //   // 跳转到下一步或返回
      //   setTimeout(() => {
      //     uni.navigateBack()
      //   }, 1500)
      // }, 2000)
    }
  },
  beforeDestroy() {
    if (this.timer) clearInterval(this.timer)
  }
}
</script>

<style lang="scss" scoped>
.phone-verify-container {
  padding: 40rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.form-container {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 0 30rpx;
}

.form-item {
  padding: 5rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
  
  &:last-child {
    border-bottom: none;
  }
  
  .form-label {
    font-size: 30rpx;
    color: #333;
    margin-bottom: 20rpx;
    display: block;
  }
  
  .code-input-wrapper {
    display: flex;
		justify-content: space-between;
    align-items: center;
    
    /deep/ .u-input {
      flex: 1;
    }
    
    .get-code-btn {
      width: 200rpx;
      margin-left: 20rpx;
      flex-shrink: 0;
    }
  }
}

.submit-btn {
  margin: 50rpx 0 30rpx;
  
  /deep/ .u-button {
    height: 90rpx;
    font-size: 32rpx;
  }
}

.active-field {
  /deep/ .u-input__content__field-wrapper__field {
    color: #03B8CD;
  }
}
</style>